<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <pre>
        v-if和v-show的区别在于：
                v-show是改了标签的样式{display:none}
                v-if是操作dom元素来切换显示状态，看起来像注释掉了
            应用场景：频繁切换用v-show 因为v-if是需要操作dom ，性能消耗大

    </pre>



    <div id="app">
        <h1 v-if="isShow">v-if的内容</h1>
        <h1 v-show="isShow">v-show的内容</h1>
        <button @click="changShow">切换显示</button>


    </div>
</body>
<script src="./vue.js"></script>
<script>
    let app = new Vue({

        el: "#app",
        data: {
            isShow: true
        },
        methods: {

            changShow: function () {
                this.isShow = !this.isShow;
            }


        }

    })
</script>

</html>